<!-- 找人才 -->
<template>
    <div class="looking-for-talent-contain">
        <div class="header-contain">
            <Header></Header>
        </div>
        <!-- 搜索 -->
        <div class="header-img-contain">
            <div class="flex-column-centers">
                <div class="search-title" v-if="userType">
                    <router-link to="#" class="active" v-if="userType == 'company'">找人才</router-link>
                    <router-link to="/job" v-else>找工作</router-link>
                </div>
                <div class="search-title" v-else>
                    <router-link to="/job">找工作</router-link>
                    <router-link to="#" class="active" >找人才</router-link>
                </div>

                <div class="search-contain">
                    <div class="job-search-bg search-input-contain">
                        <input type="text" placeholder="请输入您要寻找的人才信息" v-model="keywords">
                    </div>
                    <div class="search-button-contain mt10">
                        <button class="pointer" title="搜索" @click="init(true)">
                            <i class="search-button-icons"></i>
                        </button>
                    </div>
                </div>

            </div>
        </div>
        <!-- 搜索 end-->
        <div class="wrap pt20">
            <ul class="container pt30 pb30 pl20 pr20 radius" >
                <li class="flex-row-start">
					<span class="filter-type c666 inline-block">
						工作经验：
					</span>
                    <div class="filter-content">
						<span class="filter-item inline-block mr35 mb10 pointer pl10 pr10"
                              :class="{'active': ruleForm.workExperience === 0}"
                              @click="ruleForm.workExperience = 0"
                        >
							不限
						</span>
                        <span class="filter-item inline-block mr35 mb10 pointer pl10 pr10"
                              v-for="item in workExperienceList"
                              :key="item.id"
                              :class="{'active': ruleForm.workExperience === item.id}"
                              @click="ruleForm.workExperience = item.id"
                        >
							{{ item.name }}
						</span>
                    </div>
                </li>
                <li class="flex-row-start">
					<span class="filter-type c666 inline-block">
						简历标签：
					</span>
                    <div class="filter-content">
						<span class="filter-item inline-block mr35 mb10 pointer pl10 pr10"
                              :class="{'active': ruleForm.specialtyTags === ''}"
                              @click="ruleForm.specialtyTags = ''"
                        >
							不限
						</span>
                        <span class="filter-item inline-block mr35 mb10 pointer pl10 pr10"
                              v-for="item in specialtyTagList"
                              :key="item.id"
                              :class="{'active': ruleForm.specialtyTags === item.name}"
                              @click="ruleForm.specialtyTags = item.name"
                        >
							{{ item.name }}
						</span>
                    </div>
                </li>
                <li class="flex-row-start">
					<span class="filter-type c666 inline-block">
						更多筛选：
					</span>
                    <!--                    性别/年龄/行业类别/所学专业/学历要求/工作性质/期望薪资/刷新时间-->
                    <div class="filter-content">
                        <el-select v-model="ruleForm.sex" placeholder="请选择性别" class="mr15">
                            <el-option label="性别" :value="0"></el-option>
                            <el-option
                                v-for="item in sexData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="ruleForm.expectIndustry" placeholder="请选择行业类别" class="mr15">
                            <el-option label="行业类别" value=""></el-option>
                            <el-option
                                v-for="item in belongsIndustryList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                        <el-select v-model="ruleForm.major" placeholder="请选择所学专业" class="mr15">
                            <el-option label="所学专业" value=""></el-option>
                            <el-option
                                v-for="item in jobCategoryList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                        <el-select v-model="ruleForm.highestEducation" placeholder="请选择学历要求" class="mr15">
                            <el-option label="学历要求" :value="0"></el-option>
                            <el-option
                                v-for="item in educationList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                        <el-select v-model="ruleForm.jobCategory" placeholder="请选择工作性质" class="mr15">
                            <el-option label="工作性质" value=""></el-option>
                            <!--<el-option
                                v-for="item in workTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>-->
                            <el-option
                                label="全职"
                                value="1">
                            </el-option>
                            <el-option
                                label="实习"
                                value="3">
                            </el-option>
                        </el-select>
                        <el-select v-model="ruleForm.expectSalary" placeholder="请选择期望薪资" class="mr15">
                            <el-option label="期望薪资" value=""></el-option>
                            <el-option
                                v-for="item in wantMoneyList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                        <!--<el-select v-model="ageSelect" placeholder="请选择" class="mr15">
                            <el-option
                              v-for="item in ageData"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                        </el-select>-->
                    </div>
                </li>
            </ul>
            
            <!-- <div class="mt20 mb20">
                <div class="container pt20 pb20 pl20 pr20 radius">
					<span class="mr15">
						排序方式:
					</span>
                    <span class="border mr15 pt5 pb5 pl10 pr10 radius mr15">
						综合排序
					</span>
                    <span class="border mr15 pt5 pb5 pl10 pr10 radius mr15">
						更新时间
					</span>
                </div>
            </div> -->
            
            <ul class="mt20">
                <li>
                    <div class="sorry" v-show="thisSorry" > 
                        <img src="../../assets/sorry/sorry.png" alt="">
                        <div class="sorry-title">
                            <p class="sorry-p1">对不起，没有找到符合您条件的人才！</p>
                            <p class="sorry-p2">放宽您的查找条件也许有更多合适您的人才哦~</p>
                        </div>
                    </div>
                </li>
                <li class="mb20" v-show="!thisSorry" v-for="(item, index) in list">
                    <div class="container pt20 pb20 pl20 pr20 radius">
                        <div class="top-info flex-row-start">
                            <div class="checkbox-contain">
                                <el-checkbox v-model="checkedList[index]"></el-checkbox>
                            </div>
                            <span @click="routerLink(`/talent-detail?id=${item.id}`, true)"
                                  class="name fs18 pl20 text-l inline-block pointer">
								{{item.name}}
							</span>
                            <span class="person-info inline-block">
								{{item.sex == 1 ? '男' : '女'}}  |  {{item.year}}  |  {{ getEducationText(item.highestEducation)}}  |  {{getWorkExperienceText(item.workExperience)}}
							</span>
                            <span class="person-job inline-block">
								{{item.expectPosition}}
							</span>
                            <span class="person-address inline-block">
								{{item.workArea}}
							</span>
                            <span>
								{{item.updateTime}}
							</span>
                        </div>
                        <div class="detail-info pl35 pt25 flex-row-start">
                            <div class="avatar-contain">
                                <img :src="item.headImg || (item.sex == 1 ? man : woman)" class="responsive-img-fit">
                            </div>
                            <div class="personal-situation">
                                <p class="expect mb15">
                                    全职 | 专业：{{item.major}} | {{item.expectSalary}}/月 |
                                    {{item.workStatus == 1 ? '已就业' : '未就业'}}
                                </p>
                                <p class="more-overflow-ellipsis text">
                                    {{item.selfDesc}}
                                </p>
                            </div>
                            <div class="operating text-r">
                               <!-- <div class="download-btns pointer">
                                    <i class="download-btns-icon"></i>
                                    下载简历
                                </div>-->
                                <div class="hide download-btns downloaded pointer">
                                    <i class="download-btns-icon"></i>
                                    已下载
                                </div>
                                <p class="mt15 mr40">
									<span class="fs14 pointer inline-block"
                                          v-if="item.isResumeCollection == 1"
                                          @click="addPositionCollection(item, item.id)">
										<i class="el-icon-star-on fs16"></i>
										收藏
									</span>
                                    <span class="collect fs14 pointer inline-block"
                                          v-if="item.isResumeCollection == 2">
										<i class="el-icon-star-on fs16"></i>
										已收藏
									</span>
                                    <!--<span class="fs14 pointer inline-block ml10"
                                          v-if="item.isResumeCollection == 1"
                                          @click="changeCompanyResume(item.id, 1)">
&lt;!&ndash;										<i class="el-icon-star-on fs16"></i>&ndash;&gt;
										邀请面试
									</span>-->
                                </p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="container" style="background: transparent;" v-show="!thisSorry">
                <!-- <div class="pl20 pb30">
                     <el-checkbox v-model="checked"></el-checkbox>
                     <el-button size="small" class="ml20">
                         收藏简历
                     </el-button>
                 </div>-->

                <div class="table-pagination text-c pb160">
                    <el-pagination
                        background
                        :layout="pagination.layout"
                        :total="pagination.total"
                        :page-sizes="pagination.pageSizes"
                        :current-page.sync="pagination.page"
                        @current-change="pageChange"
                        @size-change="sizeChange"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from '@/views/components/header/header'
import Footer from '@/views/components/header/footer'
import man from '@/assets/image/man.jpg'
import woman from '@/assets/image/woman.jpg'
import {
    addCompanyResume,
    belongsIndustryList,
    educationList,
    findAllResumes, jobCategoryList,
    sexList, specialtyTagList, wantMoneyList,
    workExperienceList, workTypeList
} from '@/api/base'
import { checkResponse } from '@/utils'
import {collectResumeList, editCompanyResume} from '@/api/enterprise/work/resume'
import moment from 'moment'

export default {
    name: 'LookingForTalent',
    data() {
        return {
            thisSorry:false,//有无职位
            man: man,
            woman: woman,
            userType: this.$store.getters.userType,
            keywords: '',
            hotKeys: ['销售', 'java', '人事会计', 'UI平面设计', '行政web', '前端', '房地产'],
            checkedList: {},
            workExperience: [
                '形象好',
                '气质佳',
                '能出差',
                '很幽默',
                '技术精悍',
                '有亲和力',
                '高学历',
                '经验丰富',
                '能加班',
                '海归',
                '会开车',
                '口才好',
                '声音甜美',
                '诚实守信',
                '外语好',
                '性格开朗',
                '有上进心',
                '人脉广',
                '知识丰富',
                '多才多艺'
            ],
            workExperienceActive: 'all',
            resumeLabel: [
                '形象好',
                '气质佳',
                '能出差',
                '很幽默',
                '技术精悍',
                '有亲和力',
                '高学历',
                '经验丰富',
                '能加班',
                '海归',
                '会开车',
                '口才好',
                '声音甜美',
                '诚实守信',
                '外语好',
                '性格开朗',
                '有上进心',
                '人脉广',
                '知识丰富',
                '多才多艺'
            ],
            resumeLabelActive: 'all',
            sexData: [
                { value: '1', label: '男' },
                { value: '2', label: '女' }
            ],
            sexSelect: '性别',
            ageData: [
                { value: '18', label: '18' },
                { value: '20', label: '20' },
                { value: '22', label: '22' }
            ],
            ageSelect: '22',
            ruleForm: {
                'expectIndustry': '',
                'expectPosition': '',
                'highestEducation': 0,
                'jobCategory': '',
                'major': '',
                'sex': 0,
                'workExperience': 0,
                'expectSalary': '',
                'specialtyTags': '',
                'keywords': ''
            },
            loading: false,
            list: [],
            educationList: [],
            workExperienceList: [],
            specialtyTagList: [],
            belongsIndustryList: [],
            jobCategoryList: [],
            workTypeList: [],
            wantMoneyList: [],
            collectResumeList: [],
            sexList: []
        }
    },
    components: {
        Header,
        Footer
    },
    async created() {
        await this.getEducationList()
        await this.getWorkExperienceList()
        await this.getSpecialtyTagList()
        await this.getSexList()
        await this.getBelongsIndustryList()
        await this.getJobCategoryList()
        await this.getWorkTypeList()
        await this.getWantMoneyList()
        // await this.getCollectResumeList()
        await this.init()
    },
    watch: {
        ruleForm: {
            handler(val) {
                this.init(true)
            },
            deep: true,
        },
    },
    methods: {
        async init(reload = false) {
            if (reload) {
                this.loading = true
                this.requestData.page = 1
            }
            return this.getList()
        },
        async getList() {
            let obj = Object.assign({ ...this.ruleForm }, { ...this.requestData })
            obj.keywords = this.keywords
            // if (this.ruleForm.specialtyTags) {
            //     const specialtyTags = this.specialtyTagList.find(item => item.id == this.ruleForm.specialtyTags);
            //     if (specialtyTags) {
            //         obj.specialtyTags = specialtyTags.name;
            //     }
            // }
            return findAllResumes(obj).then(res => {
                res.data.forEach(v=>{
                    v.updateTime = v.updateTime ? moment(v.updateTime).format('YYYY-MM-DD HH:mm:ss') : '';
                })
                if (res.data=="") {
                    this.thisSorry=true;
                }else{
                    this.thisSorry=false;
                    this.list = res.data
                    this.pagination.total = res.total
                    this.loading = false
                }
            });
        },
        changeCompanyResume(id, feedback) {
            editCompanyResume(id, feedback).then(res => {
                if (checkResponse(res, true)) {
                    this.$message.success('操作成功')
                    // this.init()
                }
            })
        },
        getEducationList() {
            return educationList().then(res => {
                this.educationList = res
            })
        },
        getWorkExperienceList() {
            return workExperienceList().then(res => {
                this.workExperienceList = res
            })
        },
        getSpecialtyTagList() {
            return specialtyTagList().then(res => {
                this.specialtyTagList = res
            })
        },
        getSexList() {
            return sexList().then(res => {
                this.sexList = res
            })
        },
        getBelongsIndustryList() {
            return belongsIndustryList().then(res => {
                this.belongsIndustryList = res
            })
        },
        getJobCategoryList() {
            return jobCategoryList().then(res => {
                this.jobCategoryList = res
            })
        },
        getWorkTypeList() {
            return workTypeList().then(res => {
                this.workTypeList = res
            })
        },
        getWantMoneyList() {
            return wantMoneyList().then(res => {
                this.wantMoneyList = res
            })
        },
        getEducationText(id) {
            const info = this.educationList.find(item => item.id == id)
            if (info) {
                return info.name
            }
            return '-'
        },
        getWorkExperienceText(id) {
            const info = this.workExperienceList.find(item => item.id == id)
            if (info) {
                return info.name
            }
            return '-'
        },
        addPositionCollection(item, positionId) {
            item.isResumeCollection = 2
            addCompanyResume({ resumeId: positionId }).then(res => {
                if (checkResponse(res, true)) {
                    this.$message.success(res.resp_msg)
                }
            })
            /*
                        addPositionCollection({positionId: positionId}).then(res => {
                            if (checkResponse(res, true)) {
                                this.$message.success(res.resp_msg);
                            }
                        });
            */
        },
        //已收藏的简历列表
        getCollectResumeList() {
            collectResumeList({ page: 1, limit: 100 }).then(res => {
                this.collectResumeList = res.data
            })
        }
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import url('../../assets/styles/enterprise/common.css');
.sorry{
    width: 1200px;
    height: 300px;
    background-color: #fff;
    margin-bottom: 10px;
    display: flex;
    justify-content:center;

    img{
        width: 100px;
        height: 100px;
        line-height: 200px;
        margin:auto 20px;
    }

    .sorry-title{
        margin:auto 0px;

        .sorry-p1{
            color:#E36772;
            font-size: 20px;
            margin-bottom: 20px;
        }
        .sorry-p2{
            color:#949296;
        }
    }

}
.el-select-dropdown__item.selected {
    color: #BE485E !important;
}

.pb160 {
    padding-bottom: 160px;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3EACC4;
}

.looking-for-talent-contain {
    
    a:hover {
        color: #fff !important;
    }

    .header-contain {
        position: absolute;
        width: 100%;
        top: 0;

        .top, .nav {
            background: rgba(0, 0, 0, 0.49) !important;
        }
    }

    .header-img-contain {
        width: 100%;
        min-width: 1200px;
        height: 306px;
        background: url('../../assets/image/enterprise/jxsx-bg.png') no-repeat;
        background-size: 100% 100%;

        .flex-column-centers{
            width: 540+86px;
            position: absolute;
            top: 140px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);

            .search-title{
                font-size: 18px;
                font-weight: bold;
                color: #FFFFFF;
                margin-bottom: 5px;
                // opacity: 0.78;
                a{
                    margin-left: 30px;
                    &.active{
                        font-size: 24px;
                        color: #F5F5F5;
                    }
                    &:last-child{
                        margin-left: 22px;
                    }
                }
            }

            .search-contain{
                overflow: hidden;
                width: 539+88px;
                .job-search-bg {
                    float: left;
                    width: 539px;
                    height: 62px;
                    // background: url('../../assets/image/enterprise/search-bg-rc.png') no-repeat;
                    background: url('../../assets/image/search-bg-1.png') no-repeat;
                    background-size: 100%;


                    input{
                        outline: none;
                        width: 539px;
                        height: 48px;
                        margin-top: 12px;
                        margin-left: 2px;
                        font-size: 18px;
                        border: 0;
                        background: none;
                        font-weight: 400;
                        color: #fff;
                        padding-left: 25px;
                        border-radius: 50px;

                        &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
                            color: #E4E4E4;
                        }
                        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                            color: #E4E4E4;
                        }
                        &::-moz-placeholder { /* Mozilla Firefox 19+ */
                            color: #E4E4E4;
                        }
                        &:-ms-input-placeholder { /* Internet Explorer 10-11 */
                            color: #E4E4E4;
                        }
                    }
                }
                .search-button-contain{
                    float: right;
                    width: 88px;
                    height: 52px;
                    background: url('../../assets/image/enterprise/search-button-bg.png') no-repeat;
                    background-size: 100%;

                    button {
                        background: transparent;
                        width: 88px;
                        height: 52px;
                        border-width: 0px !important;
                        outline: none;
                        .search-button-icons {
                            margin-left: 25px;
                            display: block;
                            width: 27px;
                            height: 28px;
                            background: url('../../assets/image/enterprise/search-button-icons.png') no-repeat;
                        }
                    }
                }
            }

            .hot-tag{
                width: 539+88px;
                margin-top: 20px;
                padding-left: 30px;
                color: #F5F5F5;
                em{
                    font-style: normal;
                }
                span{
                    display: inline-block;
                    margin-right: 10px;
                    cursor: pointer;
                    font-size: 14px;
                }
            }
        }
    }
    .wrap {
        background: #F7F7F7;

        .container {
            width: 1200px;
            margin: 0 auto;
            background: #fff;

            .c666 {
                color: #666;
            }

            .filter-type {
                width: 75px;
                padding-top: 5px;
            }

            .filter-content {
                width: 1080px;

                .filter-item {
                    vertical-align: middle;
                    height: 26px;
                    line-height: 26px;
                }

                .active {
                    background: #5EAAC2;
                    border-radius: 4px;
                    color: #fff;
                }

                .el-input--medium .el-input__inner {
                    width: 100px;
                    height: 32px;
                    line-height: 32px;
                    border: 1px solid #BE485E;
                }

                .el-select{
                    margin-bottom: 15px;
                }
                .el-select .el-input .el-select__caret {
                    color: #BE485E;
                }
            }

            .top-info {
                .checkbox-contain {
                    height: 20px;
                    line-height: 20px;
                }

                .name {
                    width: 110px;
                    color: #5EAAC2;
                    vertical-align: middle;
                }

                .person-info {
                    width: 220px;
                    color: #343434;
                    vertical-align: middle;
                }

                .person-job {
                    width: 370px;
                    color: #3EABC4;
                    vertical-align: middle;
                }

                .person-address {
                    width: 300px;
                    color: #343434;
                    vertical-align: middle;
                }
            }

            .detail-info {
                .avatar-contain {
                    width: 86px;
                    height: 74px;
                    padding-right: 12px;
                }

                .personal-situation {
                    width: 800px;

                    .expect {
                        color: #343434;
                    }

                    .text {
                        color: #9A9A9A;
                        line-height: 1.5;
                    }
                }

                .operating {
                    width: 239px;

                    .download-btns {
                        display: inline-block;
                        width: 130px;
                        height: 40px;
                        background: #3EACC4;
                        border-radius: 4px;
                        color: #fff;
                        line-height: 40px;
                        text-align: center;

                        .download-btns-icon {
                            display: inline-block;
                            width: 13px;
                            height: 13px;
                            margin-right: 5px;
                            background: url('../../assets/image/enterprise/download-btns-icon-active.png') no-repeat;
                            background-size: 100% 100%;
                        }
                    }

                    .download-btns.downloaded {
                        background: #EDEDED;
                        color: #787878;

                        .download-btns-icon {
                            background: url('../../assets/image/enterprise/download-btns-icon.png') no-repeat;
                        }
                    }

                    .collect {
                        color: #CE3A5C;
                    }

                    .collect.collected {
                        color: #9A9A9A;
                    }
                }
            }

        }
    }
}
</style>
